<template>
  <div class="conntainer " id="screenWrapper" ref="screenWrapperRef" style="width: 1920px;">
    <div class="coverage-1" id="coverage-1">
      <canvas id="myCanvas" :width="1920" :height="900"></canvas>
    </div>
    <div class="coverage-2" id="coverage-2">
      <div class="coverage-header">
      </div>
      <div class="coverage-main">
        <el-row :gutter="10">
          <el-col :span="16">
            <div class="cover-container">
              <img class="screenImg" src="../../../../assets/machine/screenOne.png" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  typeIndex: {
    type: String,
    default: "",
  },
  //父组件宽度
  innerWidth: {
    type: Number,
    default: 1800,
  },
});

//Canvans画线起始值和结束值
let lineAxisArr = [
  { name: "3LHD", from: [680, 220], to: [326, 95] },
  { name: "4LHE", from: [834, 342], to: [326, 333] },
  { name: "5LHC", from: [832, 391], to: [326, 561] },
  { name: "6LHF", from: [1000, 462], to: [326, 807] },
  { name: "7RHD", from: [936, 220], to: [1600, 89] },
  { name: "8RHE", from: [1080, 326], to: [1600, 323] },
  { name: "9RHC", from: [1080, 371], to: [1600, 557] },
  { name: "10RHF", from: [1300, 446], to: [1600, 792] },
];
let imageCanvas: any;
let showName: any = ref(false);
function getMousePos(canvas, event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left * (canvas.width / rect.width);
  var y = event.clientY - rect.top * (canvas.height / rect.height);
  let ctx = imageCanvas.getContext("2d");
  ctx.lineWidth = 1; //设置线宽状态
  ctx.strokeStyle = "#ed7d31"; //设置线的颜色状态
  ctx.fillStyle = "#ed7d31"; //设置填充颜色
  ctx.font = "20px 微软雅黑";
  console.log(`${+x.toFixed(0)},${+y.toFixed(0)}`);
};

// 画线
function imgCanvans() {
  imageCanvas = document.getElementById("myCanvas");
  imageCanvas.addEventListener("click", function (event) {
    getMousePos(imageCanvas, event);
  });
  let ctx = imageCanvas.getContext("2d");
  ctx.lineWidth = 1; //设置线宽状态
  ctx.strokeStyle = "#ed7d31"; //设置线的颜色状态
  ctx.fillStyle = "#CC6633"; //设置填充颜色
  ctx.font = "30px 微软雅黑";
  for (let i = 0; i < lineAxisArr.length; i++) {
    ctx.beginPath();
    ctx.moveTo(lineAxisArr[i].from[0], lineAxisArr[i].from[1]);
    ctx.lineTo(lineAxisArr[i].to[0], lineAxisArr[i].to[1]);
    ctx.stroke();
    ctx.beginPath(); //开始绘制
    ctx.arc(lineAxisArr[i].from[0], lineAxisArr[i].from[1], 10, 0, 2 * Math.PI); //arc 的意思是“弧”
    ctx.fill(); //开始填充
    ctx.stroke(); //stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
    if (showName.value) {
      ctx.fillText(
        lineAxisArr[i].name,
        lineAxisArr[i].to[0] + 60,
        lineAxisArr[i].to[1] + 30,
      );
    }
  }
  ctx.closePath();
};
const screenWrapperRef: any = ref(null);
//根据innerWidth的宽度缩放screenWrapper
function resize() {
  let screenWrapper: any = document.getElementById("screenWrapper");
  let scale = props.innerWidth / 2200;
  screenWrapper.style.zoom = `${scale}`;
};

onMounted(() => {
  imgCanvans();
  resize();
})

</script>

<style lang="less" scoped>
.coverage-1 {
  position: absolute;
  top: 10;
  z-index: 12;
}

.coverage-header {
  margin-bottom: 140px;
}

.cover-container {
  display: flex;
  justify-content: center;
  height: 100%;
}

.screenImg {
  width: 55%;
  height: auto;
  object-fit: contain;
}
</style>

